<template>
	
	<view :class="{'m10 ':isCard}" @tap="toGoodsInfo" ref="goodsItem">
		<view class="fixAuto whiteBg" :class="isCard ? 'rds7 shadow' : 'bb'" hover-class="none">
			<view class="item" :style="{width: picWidth + 'px'}">
				<view class="square">
					<image class="rds2" :src="goods.pic" mode="aspectFill"></image>
					<view class="abs">
						<slot name="pic"></slot>
					</view>
				</view>
			</view>
			<view class="item father pb35">
				<view class="bold fz15 clip" :class="titleClass">
					<slot name="title"></slot>
					{{goods.title}}
				</view>
				<view class="gray fz14 clip" :class="descClass" v-if="goods.desc && descRow > 0">{{goods.desc}}</view>
				<slot></slot>
				<view class="absolute bottom">
					<view class="flex">
						<view class="item flex lt">
							<price class="fz18 item bold" :style="{color:priceColor}" :price="goods.price"></price>
							<view>
								<slot name="price"></slot>
							</view>
						</view>
						<view class="item">
							<view class="btn gradualBg rds20 plr15 fz13" v-if="showBtn" @tap.stop="tapBtn">{{btnText}}</view>
							<block v-else>
								<slot name="btn"></slot>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	
	
</template>

<script>
	import price from "../price/price.vue" ;
	export default {
		name: "goodsItem",
		components:{price},
		props: {
			goods:{
				type : Object ,
				default : function(){
					return {} ;
				}
			},
			url:{
				default : "/pages/goodsInfo/goodsInfo"
			},
			isCard:{
				default : true
			},
			titleRow:{
				default : 1 
			},
			descRow:{
				default : 2
			},
			btnText:{
				default : "加入购物车"
			},
			showBtn:{
				default : true 
			},
			priceColor:{
				default : "#E74970"
			},
			picWidth:{
				default : 130
			}
		},

		data() {
			return {
				width : 0  
			};
		},
		
		computed:{
			
			titleClass : function(e){
				return this.titleRow > 1 && this.titleRow < 7 ? 'c' + this.titleRow : '' ;
			},
			
			descClass: function(e){
				return this.descRow > 1 && this.descRow < 7 ? 'c' + this.descRow : '' ;
			},
		},

		methods: {
			
			tapBtn: function(e) {
				this.$emit("tapBtn", e);
			},
			
			toGoodsInfo:function(e){
				if(!this.goodsInfoPath){
					this.$emit("tapGoods", e);
					return ;
				}
				uni.navigateTo({
					url: this.goodsInfoPath + "?id=" + this.goods.id 
				});
			},
		}
	}
</script>

